<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>itRoom-join</title>
    <style>
      @font-face {
        font-family: Comfortaa;
        src: url(Comfortaa.ttf);
      }

      .show-content {
        opacity: 1;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Comfortaa';
        text-decoration: none;
        color: #ffffff;
      }

      body {
        background-color: #191919;
        opacity: 0;
        transition: opacity 1s;
      }

      header {
        position: fixed;
        display: flex;
        justify-content: space-between;
        background-color: #191919;
        height: 100px;
        width: 100vw;
        padding: 20px;
      }

      .join-btn {
        background: linear-gradient(
          to right,
          #c70bc5,
          #ff0066,
          #f65800,
          #ffed67,
          #3257ff,
          #3257ff,
          #ffed67,
          #f65800,
          #ff0066,
          #c70bc5
        );
        border: none;
        animation: rainbow_animation 4s ease-in-out infinite;
        background-size: 400% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        border-radius: 5px;
        font-weight: bolder;
        font-size: small;
        height: 54px;
        display: none;
        opacity: 0;
      }

      .logo > img {
        width: 140px;
      }

      .logo > h6 {
        padding-top: 10px;
      }

      .main-menu {
        padding-top: 100px;
      }

      @keyframes rainbow_animation {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 100% 0;
        }
        100% {
          background-position: 0 0;
        }
      }
    </style>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <a href="./index.html">
        <div class="logo">
          <img src="./logo.png" alt="itRoom" />
          <h6>Присоединяйся</h6>
        </div>
      </a>

      <a href="./join.html" class="join-btn">записаться</a>
    </header>

    <p class="about-us">
      Мы находимся по адресу: <br /><span class="rainbow-text-5"
        >г. Сургут, ул. Университетская, д. 10
        <br />
        Кабинет: 001
        <br />
      </span>
      Звоните нам по телефону: <br /><a
        href="tel:89935733753"
        class="phone-num-a"
        ><span class="rainbow-text-3">8-993-573-37-53</span></a
      >
      <br />
      Или оставьте заявку ниже:
    </p>
    <div class="form-wrapp">
      <div class="message-wrapper rainbow-border">
        <div class="message">
          <p class="message-text">
            <span class="rainbow-text-5">😺 Спасибо за заявку 😺 </span>
          </p>
          <p class="message-text">
            <span class="rainbow-text-5"
              >Мы позвоним вам в ближайшее время.</span
            >
          </p>
        </div>
      </div>
      <input
        type="tel"
        data-tel-input
        placeholder="Телефон"
        maxlength="18"
        id="phone-input"
      />
      <div class="phone-btn-border">
        <button disabled id="phone-btn" class="awesome-btn">
          <span class="phone-btn-text">Отправить</span>
        </button>
      </div>
    </div>
    <div class="map-wrapp">
      <div id="map" class="map"></div>
    </div>
    <p class="copyright">
      <span class="rainbow-text-5"
        >Создано командой<br />itRoom(😺)CatsDev<br />
        2023г</span
      >
    </p>

    <script>
      window.addEventListener('load', () => {
        document.body.classList.add('show-content')
      })
    </script>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>
